<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			showtype: {
				type: String,
				default: '电流'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				random: 20
			}
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.initChart()
				// setInterval(function () {
				//   that.random = +(Math.random() * 60).toFixed(2);
				//   that.initChart();
				// }, 2000);
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			setnum(datas) {
				//console.log("z", datas);
				let that = this;
				that.random = datas;
				that.$nextTick(() => {
					that.initChart();
				})
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')
				var value = that.random;
				var colorArr = ['#ff0000', '#00aa00', '#ff0000'];
				var title = '电流'
				var colorJB = {
					x: 0,
					y: 1,
					x2: 0,
					y2: 0,
					type: 'linear',
					global: false,
					colorStops: [{
							offset: 0,
							color: colorArr[0],
						},
						{
							offset: 0.3,
							color: colorArr[1],
						},
						{
							offset: 1,
							color: colorArr[2],
						}
					],
				};
				this.chart.setOption({
					// tooltip: {
					// 	formatter: "{a} <br/>{b} : {c}%"
					// },
					// toolbox: {
					// 	feature: {
					// 		restore: {},
					// 		saveAsImage: {}
					// 	}
					// },
					series: [{
							name: '业务指标',
							type: 'gauge',
							startAngle: 225,
							endAngle: -45,
							min: -40,
							max: 40,
							splitNumber: 5, //刻度数量
							radius: '80%',
							detail: {
								show: true,
								fontFamily: 'PingFang',
								fontWeight: '500',
								color: '#5a5e09',
								fontSize: 15,
								offsetCenter: [0, '60%'],
								formatter: function(value) {
									return value + 'A';
								},
							},
							axisTick: {
								splitNumber: 12,
								lineStyle: {
									color: "#ffffff",
									// shadowColor: 'rgba(0, 0, 0, 0.5)',
									// shadowBlur: 10,
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									width: 10,
									
									color: [
										[0.15, new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[{
													offset: 1,
													color: '#fe6b7d'
												},
												{
													offset: 0,
													color: '#fed739'
												}
											]
										)],
										[0.3, '#fed739'],
										[0.7, new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[{
													offset: 1,
													color: '#fed739'
												},
												{
													offset: 0,
													color: '#04e334'
												}
											]
										)],
										[0.85, '#fed739'],
										[1, new echarts.graphic.LinearGradient(
											0, 0, 0, 1,
											[{
													offset: 1,
													color: '#fe6b7d'
												},
												{
													offset: 0,
													color: '#fed739'
												}
											]
										)]
									]
								}
							},
							data: [{
								value: that.random,
								name: '电流'
							}]
						}

					]
				})
			}
		}
	}
</script>
